<template>
  <div id="app">
      <el-container>
          <el-container>
              <el-header>
                  AutoOperation
              </el-header>
              <el-main>
                  <div class="collectors" v-for="(executors, executorBaseName) in executorInfos" :key="executorBaseName">
                      <h1>{{ executorBaseName }}</h1>
                      <div class="items">
                          <div class="item" v-for="executorInfo in executors" :key="executorInfo.executorName">
                              <Card
                                  :executor-info="executorInfo">
                                  <template #executorSelector>
                                      <el-checkbox-group size="small" v-model="executorsCheckboxGroups[executorInfo.executorName]" @change="publisherExecutorSelector(executorInfo.executorName)" v-if="executorBaseName === 'PublisherExecutor'">
                                          <el-checkbox-button v-for="executorInfo in executorInfos['ProducerExecutor']" :label="executorInfo.executorName" :key="executorInfo.executorName">{{executorInfo.executorName.split("ProducerExecutor")[0]}}</el-checkbox-button>
                                      </el-checkbox-group>
                                  </template>
                              </Card>
                          </div>
                      </div>

                  </div>

              </el-main>
          </el-container>
      </el-container>
<!--    <nav>-->
<!--      <router-link to="/">Home</router-link> |-->
<!--      <router-link to="/about">About</router-link>-->
<!--    </nav>-->
<!--    <router-view/>-->
  </div>
</template>

<script>
import Card from "@/components/Card";

export default {
    components: {
        Card
    },
    data() {
        return {
            executorInfos: [],
            executorsCheckboxGroups: {}
        }
    },
    methods: {
        webSocketOnMessage(e) {
            const data = JSON.parse(e.data)
            let dataType = data.type
            if (dataType === "getAllExecutorInfo") {
                let executorInfos = {}
                data.message.forEach((executor) => {
                    if (executor.executorBaseName in executorInfos) {
                        executorInfos[executor.executorBaseName].push(executor)
                    }else {
                        executorInfos[executor.executorBaseName] = [executor]
                    }

                    if (executor.executorBaseName === "PublisherExecutor") {
                        if (!(executor.executorName in this.executorsCheckboxGroups)) {
                            this.executorsCheckboxGroups[executor.executorName] = []
                        }
                    }
                })
                this.executorInfos = executorInfos
            }
            else if (dataType === "pauseExecutor") {
                this.$message.success("暂停成功")
            }
            else if (dataType === "startUpExecutor") {
                this.$message.success("继续运行成功")
            }
            else if (dataType === "startExecutor") {
                this.$message.success("启动成功")
            }
            else if (dataType === "addSchedulerJob") {
                this.$message.success("定时任务添加成功")
            }
            else if (dataType === "removeSchedulerJob") {
                this.$message.success("定时任务取消成功")
            }
            else if (dataType === "PublisherExecutorSelector") {
                this.$message.success("发布任务修改成功")
            }
            else if (dataType === "getAllPublisherExecutorSelectedModels") {
                this.executorsCheckboxGroups = data.message.allPublisherExecutorSelectedModels
            }
        },
        publisherExecutorSelector(publisherExecutorName) {
            this.$forceUpdate()
            let data = {
                type: "PublisherExecutorSelector",
                publisherExecutorName: publisherExecutorName,
                selectedExecutors: this.executorsCheckboxGroups[publisherExecutorName]
            }
            this.websocket.webSocketSend(data)
        },

    },
    destroyed() {
        this.websocket.close()
    },
    mounted() {
        this.websocket.initWebSocket("console/console")
        this.websocket.socket.onmessage = this.webSocketOnMessage
    },
    updated() {
        // 获取最新getAllPublisherExecutorSelectedModels
        let data = {
            type: "getAllPublisherExecutorSelectedModels",
        }
        this.websocket.webSocketSend(data)
    }

}

</script>

<style>
    @import "assets/fonts/Poppins/font.css";
    * {
        margin: 0;
        padding: 0;
        font-family: 'poppins',sans-serif;
    }
</style>
<style lang="less" scoped>
    .el-container {
        height: 100vh;
    }
    .el-header {
        height: 10vh !important;
        background-color: #fdfdfe;
        font-size: 25px;
        font-weight: bold;
        text-align: center;
        line-height: 10vh;
        color: #409EFF;
    }
    .el-main {
        background-color: #f5f5f5;
        .collectors {
            margin-bottom: 30px;
        }
        h1 {
            font-size: 21px;
        }
        .items {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            .item {
                margin: 15px;
            }
        }
    }
</style>
